<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        /* .parent{ */
           /* overflow:hidden;不结合height,作用就是根据内容自动增高 */
           /* overflow:hidden;
           background-color: aqua; */
        /* } */
        .box{
           height:200px;
           width:200px;
           background-color: red;
           float:left;
        }
        h2{
            height:50px;
            width:100%;
            background-color:green;
            /* 清除浮动带来的影响 
            clear:left; 清除左浮动带来的影响
            clear:right; 清除右浮动带来的影响
            clear:both; 清除左右浮动带来的影响 */
            /* clear:left; */
        }
        /* XXX::after/XXX:after 在XXX元素内容最后添加一个内容
        XXX::before/XXX:before 在XXX元素内容最前面添加一个内容 */
        /* div:after{
            content:"aaa";
            display: block;
            clear:both;
        } */
        .parent::after{
            /* content可以没有内容，但必须有content */
            content:""; 
            /* 后面正常写css */
            height:0;
            display: block;
            clear:both;
            overflow: hidden;
        }
    </style>
</head>
<body>
    浮动会脱离文档流，会出现高度塌陷的问题
    解决浮动带来的问题，并不是让它不浮动
    1.以浮止浮(不推荐)
    2.给父级元素增加高度,父级元素是不浮动的(不推荐)
    3.给父级元素根据内容自动增加高度(overflow:hidden),父级元素是不浮动的(推荐)
      BFC(块级格式化上下文)---父级变成一个独立空间，不会影响到外面
    4.清除浮动带来的影响 (一般这个方法，不会直接写在要清除浮动的元素上，一般会在上面额外添加一个标签 如：<br>)---(不推荐)
        clear:left; 清除左浮动带来的影响
        clear:right; 清除右浮动带来的影响
        clear:both; 清除左右浮动带来的影响 
    5.通过::after 父级元素(不浮动)添加---(推荐)
    <!-- <div class="parent">
        <div class="box"></div>
    </div> -->
    <div class="parent">
        <div class="box">
            <p>111</p>
            <p>222</p>
        </div>
        <!-- <br style="clear:left;"> -->
    </div>
    <!-- <br style="clear:left;"> -->
    <h2>222</h2>
</body>
</html>